<template>
  <div class="users-container">
    <div class="header-actions">
      <el-button type="primary" @click="handleAdd">添加用户</el-button>
    </div>

    <el-table :data="userList" style="width: 100%" border>
      <el-table-column prop="userId" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="userType" label="用户类型" width="120" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '添加用户' : '编辑用户'">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item label="密码" v-if="dialogType === 'add'">
          <el-input v-model="formData.password" type="password" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formData.name" />
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryAllUsers, addUser, updateUser, deleteUser } from '@/api/user'

interface UserVO {
  userId: number
  username: string
  name: string
  userType: string
}

const userList = ref<UserVO[]>([])
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const formData = ref({
  userId: 0,
  username: '',
  password: '',
  name: '',
})

// 获取用户列表
const fetchUsers = async () => {
  try {
    const res = await queryAllUsers()
    if (res && Array.isArray(res.data)) {
      userList.value = res.data
    } else {
      console.error('Invalid response data format:', res)
      ElMessage.error('获取用户列表失败：数据格式错误')
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    ElMessage.error('获取用户列表失败')
  }
}

// 添加用户
const handleAdd = () => {
  dialogType.value = 'add'
  formData.value = {
    userId: 0,
    username: '',
    password: '',
    name: '',
  }
  dialogVisible.value = true
}

// 编辑用户
const handleEdit = (row: UserVO) => {
  dialogType.value = 'edit'
  formData.value = { ...row, password: '' }
  dialogVisible.value = true
}

// 删除用户
const handleDelete = async (row: UserVO) => {
  try {
    await ElMessageBox.confirm('确定要删除该用户吗？', '警告', {
      type: 'warning'
    })
    await deleteUser(row.userId)
    ElMessage.success('删除成功')
    fetchUsers()
  } catch (error) {
    console.error('删除失败:', error)
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    if (dialogType.value === 'add') {
      await addUser(formData.value)
      ElMessage.success('添加成功')
    } else {
      await updateUser(formData.value)
      ElMessage.success('更新成功')
    }
    dialogVisible.value = false
    fetchUsers()
  } catch (error) {
    ElMessage.error(dialogType.value === 'add' ? '添加失败' : '更新失败')
  }
}

onMounted(() => {
  fetchUsers()
})
</script>

<style lang="scss" scoped>
.users-container {
  padding: 20px;

  .header-actions {
    margin-bottom: 20px;
  }
}
</style>
